<template>
  <div style="background-color: #f5f5f5; padding: 20px; min-height: 100vh;">
    <!-- 模仿纸张的容器 -->
    <div
        style="
        background-color: #ffffff;
        width: 1200px;
        min-height: calc(100vh - 40px);
        margin: 0 auto;
        padding: 40px 20px;
        border-radius: 8px;
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
        border: 1px solid #e0e0e0;
        display: flex;
        flex-direction: column;
      "
    >
      <!-- 标题部分 -->
      <div style="text-align: left; margin-bottom: 50px;">
        <i
            class="el-icon-s-management"
            style="
            color: #409EFF;
            font-size: 36px;
            margin-right: 10px;
            vertical-align: middle;
          "
        ></i>
        <span style="font-size: 24px; color: #333; font-weight: bold;">文档</span>
      </div>

      <!-- 数据展示 -->
      <div v-if="menuItems.length" style="flex: 1;">
        <div
            v-for="(item, index) in menuItems"
            :key="index"
            @click="onItemClick(item)"
            style="
            position: relative;
            padding: 20px 10px;
            border-bottom: 1px solid #e0e0e0;
            cursor: pointer;
            transition: background-color 0.2s;
          "
            @mouseover="hover = index"
            @mouseleave="hover = null"
            :style="{ backgroundColor: hover === index ? '#f5faff' : 'transparent' }"
        >
          <!-- 左侧标题 -->
          <h2
              style="
              font-size: 18px;
              margin: 0;
              display: inline-block;
              vertical-align: middle;
            "
          >
            {{ item.title }}
          </h2>
          <!-- 虚线 -->
          <span
              style="
              display: inline-block;
              width: calc(100% - 160px);
              height: 1px;
              border-bottom: 1px dashed #dcdfe6;
              vertical-align: middle;
              margin: 0 10px;
            "
          >
              <span
                  style="
              font-size: 14px;
              color: #909399;
              position: absolute;
              right: 10px;
              top: 20px;
            "
              >
             {{ item.createTime}}
          </span>
          </span>
          <!-- 右侧 ID -->

        </div>
      </div>
      <!-- 空状态 -->
      <div
          v-else
          style="
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #bfbfbf;
          font-size: 18px;
          text-align: center;
          border: 2px dashed #dcdfe6;
          border-radius: 4px;
        "
      >
        <div>
          <i class="el-icon-folder-remove" style="font-size: 48px; margin-bottom: 10px;"></i>
          <p>当前没有任何数据</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Note",
  data() {
    return {
      user: JSON.parse(localStorage.getItem('honey-user') || '{}'),
      info: {
        userId: "",
      },
      title: "", // 页面标题
      menuItems: [], // 保存目录数据
      hover: null, // 鼠标悬浮索引
    };
  },

  created() {
      this.sendPostRequest();
  },
  methods: {
    // 加载数据
    sendPostRequest() {
      this.info.userId = this.user.userId;
      this.$request
          .post("/notes/queryAllNotes", this.info)
          .then((res) => {
            if (res.code === "200") {
              this.menuItems = res.data;
            } else {
              this.$message.error("菜单加载失败");
            }
          })
          .catch(() => {
            this.$message.error("请求失败，请检查网络连接！");
          });
    },
    // 数据项点击事件
    onItemClick(item) {
      this.$router.replace({
        path: '/note',
        query: { id: item.id, name: item.title ,content:item.content}
      });
    },
  },
};
</script>

<style scoped>
/* 基本样式调整 */
p {
  margin: 0;
}
</style>
